<template>
    <div class="app-container">
        <el-card shadow="always">
            <el-form :model="queryParams" :inline="true" label-width="100px">
                <el-form-item label="所属区县：" prop="county">
                    <el-select v-model="queryParams.county" placeholder="请选择所属区县" clearable style="width: 240px">
                        <el-option v-for="dict in nhp_county_type" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="所属站点ID">
                    <el-input v-model="queryParams.stationId" clearable placeholder="请输入所属站点ID" style="width: 240px" />
                </el-form-item>
                <el-form-item label="覆盖类型">
                    <el-input v-model="queryParams.stationType" clearable placeholder="请输入覆盖类型" style="width: 240px" />
                </el-form-item>
                <el-form-item label="所属站点">
                    <el-input v-model="queryParams.stationName" clearable placeholder="请输入所属站点" style="width: 240px" />
                </el-form-item>
                <el-form-item label="所属机房">
                    <el-input v-model="queryParams.stationRoom" clearable placeholder="请输入所属机房" style="width: 240px" />
                </el-form-item>
                <el-form-item label="产权大类">
                    <el-input v-model="queryParams.property" clearable placeholder="请输入产权大类" style="width: 240px" />
                </el-form-item>
                <el-form-item label="设备类型">
                    <el-input v-model="queryParams.deviceType" clearable placeholder="请输入设备类型" style="width: 240px" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="listPhysicalStation">查询</el-button>
                    <el-button @click="unsetQueryForm"><el-icon>
                            <RefreshRight />
                        </el-icon>重置</el-button>
                </el-form-item>

            </el-form>
        </el-card>
        <el-card shadow="always" style="margin-top: 10px;min-height: 500px;padding-bottom: 3px;">
            <div id="table" style="margin-top: 20px;">
                <el-table v-loading="loading" ref="cellInfoTable" :data="cellInfoTableData" style="width: 100%"
                    @sort-change="sortChange" @filter-change="filterChange">
                    <el-table-column prop="county" label="区县" width="120" align="center" fixed />
                    <el-table-column prop="stationId" label="所属站点ID" width="250" align="center" show-overflow-tooltip />
                    <el-table-column prop="stationType" label="覆盖类型" width="120" align="center" />
                    <el-table-column prop="stationName" label="所属站点" width="250" align="center" />
                    <el-table-column prop="stationRoom" label="所属机房" width="250" align="center" />
                    <el-table-column prop="highValue" label="是否高价值" width="200" align="center" />
                    <el-table-column prop="property" label="产权大类" width="120" align="center" />
                    <el-table-column prop="deviceType" label="设备类型" width="120" align="center" />
                    <el-table-column prop="stationNo" label="铁塔公司站址编号" width="200" align="center" />
                    <el-table-column prop="batteryDuration" label="蓄电池配置与否" width="120" align="center" />
                    <el-table-column prop="loopDetection" label="动环监控配置与否" width="150" align="center" />
                    <el-table-column prop="sameRoute" label="同路由与否" width="150" align="center" />
                    <el-table-column prop="transmitType" label="传输成环与否" width="120" align="center" />
                    <el-table-column prop="cranStation" label="CRAN站点" width="120" align="center" />
                    <el-table-column prop="weeklyAverageBusiness" label="一周日均业务量（Gb）" width="120" align="center" />
                    <el-table-column fixed="right" label="操作" min-width="120" align="center">
                        <template #default="scope">
                            <el-button link type="primary" size="small"
                                @click="showDetailDialog(scope.row.stationId)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 50, 100, 200]" layout="total, sizes, prev, pager, next" :total="total"
                    @size-change="listPhysicalStation" @current-change="listPhysicalStation" /> -->
                <pagination v-show="total > 0" :total="total" v-model:page="currentPage" v-model:limit="pageSize"
                    @pagination="listPhysicalStation" :autoScroll="false" />
            </div>
        </el-card>
        <el-dialog v-model="detailDialogVisible" title="查看物理站详情" width="1200" @closed="closeDialog">
            <el-form :inline="true" :model="cellInfoForm" label-width="150px">
                <el-form-item label="所属区县">
                    <el-input v-model="cellInfoForm.county" disabled style="width: 200px" />
                </el-form-item>
                <el-form-item label="所属站点ID">
                    <el-input v-model="cellInfoForm.stationId" disabled style="width: 200px" />
                </el-form-item>
                <el-form-item label="覆盖类型">
                    <el-input v-model="cellInfoForm.stationType" disabled style="width: 200px" />
                </el-form-item>
                <el-form-item label="所属站点">
                    <el-input v-model="cellInfoForm.stationName" disabled style="width: 860px" />
                </el-form-item>
                <el-form-item label="所属机房">
                    <el-input v-model="cellInfoForm.stationRoom" disabled style="width: 860px" />
                </el-form-item>
                <el-form-item label="是否高价值">
                    <el-input v-model="cellInfoForm.highValue" disabled style="width: 200px" />
                </el-form-item>
                <el-form-item label="产权大类">
                    <el-input v-model="cellInfoForm.property" disabled style="width: 200px" />
                </el-form-item>
                <el-form-item label="设备类型">
                    <el-input v-model="cellInfoForm.deviceType" disabled style="width: 200px" />
                </el-form-item>
                <el-form-item label="铁塔公司站址编号">
                    <el-input v-model="cellInfoForm.stationNo" disabled style="width: 200px" />
                </el-form-item>
                <el-form-item label="蓄电池配置与否">
                    <el-input v-model="cellInfoForm.batteryDuration" disabled style="width: 200px" />
                </el-form-item>
                <el-form-item label="动环监控配置与否">
                    <el-input v-model="cellInfoForm.loopDetection" disabled style="width: 200px" />
                </el-form-item>
                <el-form-item label="同路由与否">
                    <el-input v-model="cellInfoForm.sameRoute" disabled style="width: 200px" />
                </el-form-item>
                <el-form-item label="传输成环与否">
                    <el-input v-model="cellInfoForm.transmitType" disabled style="width: 200px" />
                </el-form-item>
                <el-form-item label="CRAN站点">
                    <el-input v-model="cellInfoForm.cranStation" disabled style="width: 200px" />
                </el-form-item>
                <el-form-item label="一周日均业务量(Gb)">
                    <el-input v-model="cellInfoForm.weeklyAverageBusiness" disabled style="width: 200px" />
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup name="audit">

import { ref } from 'vue';

const { proxy } = getCurrentInstance();
const { nhp_network_type, nhp_county_type } = proxy.useDict("nhp_network_type", "nhp_county_type");
import { queryPhysicalStationList, queryPhysicalStationDetail } from '@/api/biz/networkEnv';

const pageSize = ref(10)
const currentPage = ref(1)
const total = ref(0)
const cellInfoTableData = ref([]);

const queryParams = ref({})
const detailDialogVisible = ref(false)
const cellInfoForm = ref({})
const dialogFormVisible = ref(false)

const form = ref({})
function listPhysicalStation() {
    const param = {}
    param.pageSize = pageSize.value;
    param.pageNum = currentPage.value;
    param.county = queryParams.value.county;
    param.stationId = queryParams.value.stationId;
    param.stationName = queryParams.value.stationName;
    queryPhysicalStationList(param).then(res => {
        cellInfoTableData.value = res.rows
        total.value = res.total
    })
}

function dateFormatter(row, column, cellValue, index) {
    if (!cellValue) { return }
    // 创建一个新的 Date 对象
    var originalDate = new Date(cellValue);

    // 获取年、月、日、时、分、秒
    var year = originalDate.getFullYear();
    var month = ("0" + (originalDate.getMonth() + 1)).slice(-2);
    var day = ("0" + originalDate.getDate()).slice(-2);
    var hours = ("0" + originalDate.getHours()).slice(-2);
    var minutes = ("0" + originalDate.getMinutes()).slice(-2);
    var seconds = ("0" + originalDate.getSeconds()).slice(-2);

    // 格式化输出
    var formattedDateTimeString = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    return formattedDateTimeString;
}

function showDetailDialog(id) {
    let params = {
        stationId: id
    }
    queryPhysicalStationDetail(params).then(res => {
        cellInfoForm.value = res.data
        cellInfoForm.value.addTime = dateFormatter(null, null, res.data.addTime, null)
        detailDialogVisible.value = true
    })
}

function closeDialog() {
    cellInfoForm.value = {}
    detailDialogVisible.value = false
}

function unsetQueryForm() {
    queryParams.value = {}
}

listPhysicalStation()

</script>

<style lang="scss" scoped></style>